<template>
  <div>
    <mu-appbar title="">
      <mu-icon-button icon="navigate_before" slot="left" @click="$router.back()"/>
      <mu-flat-button label="删除" slot="right" @click="showConfirmDialog=true"/>
    </mu-appbar>
    <img :src="$route.query.url" class="image-displayed"/>
    <mu-dialog :open="showConfirmDialog" title="删除图片" @close="cancelDelete">
      是否删除图片
      <mu-flat-button slot="actions" @click="cancelDelete" primary label="取消"/>
      <mu-flat-button slot="actions" primary @click="confirmDelete" label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
  import store from '../store/store'
  export default {
    name: "report-course-feedback-image-detail",
    created() {
    },
    data(){
      return{
        showConfirmDialog:false
      }
    },
    computed:{
      imageToUpload:()=>store.state.imageToUpload
    },
    methods:{
      cancelDelete(){
        this.showConfirmDialog = false
      },
      confirmDelete(){
        this.showConfirmDialog = false
        let index = this.imageToUpload.findIndex(value => value.url===this.$route.query.url)
        if (index!==-1){
          store.commit('deleteImageToUpload',index)
        }
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .image-displayed{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
</style>
